<template>
  <div>
    <el-card>
      <el-table ref="singleTable" :data="getDeviceAlarms" highlight-current-row style="width: 100%">
        <el-table-column property="address" label="服务区"></el-table-column>
        <el-table-column property="name" label="设备号" width="120"></el-table-column>
        <el-table-column property="date" label="时间" width="120"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";

export default {
  data() {
    return {};
  },

  methods: {
    ...mapActions(["insertDeviceAlarm", "insertDeviceAlarms"]),
    showDevices() {
      console.log(this.getDeviceAlarms());
    },
    // 批量添加设备的方法
    addDevices() {
      // 1.通过axios请求获取数据，并将返回的数据添加到vuex的公共数据部分deviceAlarms，然后其他使用该数据的地方就会发生改变
      this.$axios
        .get("/deviceAlarms")
        .then(response => {
          this.insertDeviceAlarms(JSON.parse(response.data)["deviceAlarms"]);
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  // 为什么将vuex中的方法添加到computed就可以被作为属性名引用，而放在methods之中引用就会报错
  computed: {
    ...mapGetters(["getDeviceAlarms"])
  },
  mounted() {
    this.addDevices();
  }
};
</script>